<template>
  <base-breadcrumb :title="$route.meta.title">
    <!-- 廉洁谈话 -->
    <a-form-model
      ref="ruleForm"
      :model="form"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 18 }"
      :rules="editModel != 0 ? rules : {}"
    >
      <a-spin :spinning="loading">
        <!-- 表格 -->
        <!-- 类型集体 -->
        <a-card :bordered="false">
          <title-name title="基本信息" />
          <custom-form
            :form-list="formList[formCur]"
            :form="form"
            :edit-model="editModel == 0 ? 'V' : ''"
            @getOption="handleChange"
          >
            <!-- 附件上传 -->
            <template #fileList>
              <template v-if="editModel != 0">
                <l-table
                  :file-auto-loading="false"
                  business-code="UN06"
                  :upload-arrys.sync="form.fileList"
                />
                <div class="file_prompt">
                  请上传原件，支持格式：.rar .zip .doc .docx .pdf .jpg .png .mp4 .mov
                </div>
              </template>
              <file-link
                v-else
                :file-list="form.fileList"
              />
            </template>
          </custom-form>
        </a-card>
      </a-spin>
      <!-- 页脚操作栏 -->
      <div class="btn_box page-btn-right-top">
        <a-button
          v-if="editModel != 0"
          :loading="loadingSub"
          type="primary"
          class="button_right"
          @click="handleSubmit()"
        >
          提交
        </a-button>
        <a-button
          type="primary"
          @click="handleActiveClose"
        >
          关闭
        </a-button>
      </div>
    </a-form-model>
  </base-breadcrumb>
</template>

<script>
  import { create, update, detail, getLabels } from '@/api/disciplineInspection/culturalEducation/ljTalk' // api
  import { getOrgEmployeeByUser } from '@/api/commons' // api
  import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
  import SelectSupevise from '@/components/Select/SelectSupevise'
  import Selector from '@/components/Select/Selector'
  import SelectCompanyAndProject from '@/components/Select/SelectCompanyAndProject.vue'
  export default {
    name:'a'+ Date.now(),
    extends: new BaseEditPage(),
    components: {
    },
    data() {
      return {
        formCur:0,
        loading: false, // 加载控件
        loadingSub: false, // 加载按钮
        editModel: this.$route.query.editModel, // 操作状态:0 查看;1 编辑;2 新增
        form: {
          jobTitle:'',
          political:'',
        }, // 表单
        rules: {
          typleId: [{ required: true, message: '请选择谈话对象类型', trigger: 'blur' }],
          talker: [{ required: true, message: '请选择谈话对象', trigger: 'change' }],
          jobTitle: [{ required: false, message: '请选择谈话对象获取', trigger: 'change' }],
          political: [{ required: false, message: '请选择谈话对象获取', trigger: 'change' }],
          meetTime: [{ required: true, message: '请选择日期', trigger: 'change' }],
          unit: [{ required: true, message: '请选择单位', trigger: 'change' }],
          time: [{ required: true, message: '请选择日期', trigger: 'change' }],
          address: [{ required: true, message: '请输入地点', trigger: 'change' }],
          talk: [{ required: true, message: '请选择谈话人', trigger: 'change' }],
          record: [{ required: true, message: '请选择记录人', trigger: 'change' }],
          content: [{ required: true, message: '请输入谈话主题', trigger: 'change' }],
          fileList: [{ required: true, message: '请上传文件', trigger: 'blur' }],
        }, // 校验规则
        init: false, // 初始化控件
        formCode: '', // 形式选中项code
        code: '', // 附件上传的businessCode
        matterTypeArr: [] // 谈话对象类型
      }
    },

    computed: {
      // 0 个人表单
      // 1 集体表单
      formList() {
        return [
          // 个人
          [
            {
            keyName: 'typleId',
            viewName: 'typleName',
            type: Selector,
            label: '谈话对象类型',
            attrs: {
              selectType: '9',
              urlType: 'union',
              labelInValue: false,
              isDefault:true,
            },
          },
          // {
          //   keyName: 'typle',
          //   viewName: 'typleName',
          //   type: 'a-select',
          //   label: '谈话对象类型',
          //   data: this.matterTypeArr,
          //   replaceFields: {
          //     value: 'id', // 默认为value
          //     label: 'name' // 默认为label
          //   },
          //   attrs:{
          //     labelInValue:true
          //   }
          // },
          {
            keyName: 'talker',
            viewName: 'talkerName',
            label: '谈话对象',
            type: SelectSupevise,
            placeholder:'请选择谈话对象',
            attrs: {
              labelInValue:true,
            },
            ellipsis: true,
          },
          {
            keyName: 'jobTitle',
            viewName: 'jobTitle',
            type: 'a-input',
            label: '职务',
            disabled: true,
            placeholder:'请选择谈话对象',
          },
          {
            keyName: 'political',
            viewName: 'political',
            type: 'a-input',
            label: '政治面貌',
            placeholder:'请选择谈话对象',
            disabled: true,
          },
          {
            keyName: 'meetTime',
            viewName: 'meetTime',
            type: 'a-date-picker',
            placeholder: '请选择时间',
            label: '时间',
          },
          {
            keyName: 'address',
            viewName: 'address',
            type: 'a-input',
            label: '地点',
          },
            {
            keyName: 'talk',
            viewName: 'talkName',
            type: SelectSupevise,
            placeholder: '请选择谈话人',
            label: '谈话人',
            attrs: {
              labelInValue:true,
              orgId: '53085e2c9f1f4685801ef31994f57c49',
              culEdu:true,
            },
            ellipsis: true,
          },
          {
            keyName: 'record',
            viewName: 'recordName',
            type: SelectSupevise,
            placeholder: '请选择记录人',
            label: '记录人',
            attrs: {
              labelInValue:true,
            },
            ellipsis: true,
          },
          {
            keyName: 'content',
            type: 'BaseTextarea',
            label: '谈话主题',
            autoSize:{ minRows: 10, maxRows: 10 },
            attrs: {
              maxLength : 1000,
            },
            span:24
          },
          {
            slot: true,
            keyName: 'fileList',
            label: '活动资料',
            span: 24,
          },
        ],
          // 集体
          [
            {
              keyName: 'typleId',
              viewName: 'typleName',
              type: Selector,
              label: '谈话对象类型',
              attrs: {
                selectType: '9',
                urlType: 'union',
                labelInValue: false,
                isDefault:true,
              },
            },
            {
              keyName: 'unit',
              viewName: 'unitName',
              type: SelectCompanyAndProject,
              placeholder: '请选择单位',
              label: '单位',
              attrs:{
                labelInValue: true,
              },
              ellipsis: true,
            },
            {
              keyName: 'meetTime',
              viewName: 'meetTime',
              type: 'a-date-picker',
              placeholder: '请选择时间',
              label: '时间',
            },
            {
              keyName: 'address',
              viewName: 'address',
              type: 'a-input',
              label: '地点',
            },
            {
              keyName: 'talk',
              viewName: 'talkName',
              type: SelectSupevise,
              placeholder: '请选择谈话人',
              label: '谈话人',
              attrs: {
                labelInValue:true,
              },
              ellipsis: true,
            },
            {
              keyName: 'record',
              viewName: 'recordName',
              type: SelectSupevise,
              placeholder: '请选择记录人',
              label: '记录人',
              attrs: {
                labelInValue:true,
              },
              ellipsis: true,
            },
            {
              keyName: 'content',
              type: 'BaseTextarea',
              label: '谈话主题',
              autoSize:{ minRows: 10, maxRows: 10 },
              attrs: {
                maxLength : 1000,
              },
              span:24
            },
            {
              slot: true,
              keyName: 'fileList',
              label: '附件',
              span: 24,
            },
          ]
        ]
      },
     },
    watch:{
      'form.jobTitle'(val){
      },
      'form.political'(val){
      }
    },
    methods: {
      /**
       * 获取谈话对象详细信息
       **/
      handleTokerInfo(id){
        getOrgEmployeeByUser(id).then((res)=>{
          this.form.jobTitle = res.data.jobTitle;
          this.form.political = res.data.political;
        })
      },
      /**
       * 谈话对象类型切换
       **/
      handleChange(val, e){
        if(val === 'typleId'){
          if(e.name === '个人'){
            this.formCur = 0
          }else if(e.name === '集体'){
            this.formCur = 1
          }
        }else if(val === 'talker'){
          this.handleTokerInfo(e.userId)
        }
      },
      /**
       * 校验表单
       */
      handleSubmit(val) {
        // 提交表单
        this.$refs.ruleForm.validate((e) => {
          if (e) {
            this.handleSubmitApi(val)
          }
        })
      },
      /**
       * 提交表单
       */
      handleSubmitApi(val){
        let that = this
        let api = [update, create][that.editModel - 1] // 根据操作切换url地址
        that.loading = true
        that.loadingSub = true
        let formData = that.$clone(that.form)
        let form={
          ...formData,
          unitId: formData.unit ? formData.unit.value : '',
          talkerId: formData.talker ? formData.talker.key : '',
          talkId: formData.talk.key,
          recordId: formData.record.key,
          fileId: formData.fileList.map(item =>{return item.commonId}).toString(), //上传文件id的数组转字符串
          orgId:JSON.parse(sessionStorage.getItem('ycloud-user_info')).currentPost.id
        }
        api(form)
          .then(() => {
            that.loading = false
            that.$message.success('提交成功！')
            that.$multiTab.close()
          })
          .catch(() => {
            that.loading = false
          })

      },
    },
    mounted(){
      this.$route.meta.title = ['廉洁谈话查看', '廉洁谈话编辑', '廉洁谈话新增'][this.editModel]
      /**
       * 不为添加时请求详情
       * */
      if (this.editModel != 2) {
        this.loading = true
        detail(this.id)
          .then((res) => {
            let data=res.data;
            this.loading = false
            this.form ={
              ...data,
              fileList : data.fileInfoVOS,
              typle: {
                value: data.typleId,
                label: data.typleName,
              },
              unit: {
                value: data.unitId,
                label: data.unitName,
              },
              talker: {
                key: data.talkerId,
                label: data.talkerName,
              },
              talk: {
                key: data.talkId,
                label: data.talkName,
              },
              record: {
                key: data.recordId,
                label: data.recordName,
              },
            }
            if(data.talkerId){
              this.handleTokerInfo(data.talkerId)
            }
            if(data.typleName === '个人'){
              this.formCur = 0
            }else if(data.typleName === '集体'){
              this.formCur = 1
            }
            this.$nextTick(() => {
              this.init = true
            })
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        this.$nextTick(() => {
          this.init = true
        })
      };
    }
  }
</script>

<style lang="less" scoped>
    /deep/ .ant-form-item {
        .ant-form-item-label {
            height: 28px;
            width: 200px;
            line-height: 22px;
            padding: 6px 4px 0 0;
            text-align: right;
            white-space: pre-wrap;
            overflow: visible;
        }
        .ant-form-item-control-wrapper {
            width: calc(100% - 200px);
        }
    }
    .file_prompt {
        color: #999;
    }
</style>